<template>
  <div class="templates-container">
    <!-- 搜索和筛选 -->
    <el-card class="filter-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="searchForm.search"
            placeholder="搜索模板名称"
            clearable
            @clear="handleSearch"
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="searchForm.format"
            placeholder="封装格式"
            clearable
            @change="handleSearch"
            style="width: 100%"
          >
            <el-option label="全部格式" value="" />
            <el-option label="MP4" value="mp4" />
            <el-option label="FLV" value="flv" />
            <el-option label="TS" value="ts" />
            <el-option label="MKV" value="mkv" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="searchForm.codec"
            placeholder="视频编码"
            clearable
            @change="handleSearch"
            style="width: 100%"
          >
            <el-option label="全部编码" value="" />
            <el-option label="H.264" value="h264" />
            <el-option label="H.265" value="h265" />
          </el-select>
        </el-col>
        <el-col :span="4" style="display: flex; justify-content: flex-end; gap: 8px;">
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="openAddTemplateDialog">
            <el-icon><Plus /></el-icon>
            新建模板
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 模板列表 -->
    <el-card class="template-table">
      <el-table
        :data="templates"
        v-loading="loading"
        style="width: 100%"
        stripe
        :header-cell-style="{ background: '#f5f7fa', color: '#303133', fontWeight: '600', fontSize: '14px' }"
        :cell-style="{ padding: '8px 0' }"
      >
        <el-table-column prop="name" label="模板名称" min-width="180" fixed="left" show-overflow-tooltip />
        <el-table-column label="封装格式" width="80" align="center">
          <template #default="{ row }">
            <el-tag type="info" size="small">{{ row.container_format?.toUpperCase() }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="视频编码" width="90" align="center">
          <template #default="{ row }">
            <span>{{ row.video_codec?.toUpperCase() }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分辨率" width="100" align="center">
          <template #default="{ row }">
            <span>{{ row.video_resolution }}</span>
          </template>
        </el-table-column>
        <el-table-column label="视频码率" width="100" align="center">
          <template #default="{ row }">
            <span>{{ row.video_bitrate }}kbps</span>
          </template>
        </el-table-column>
        <el-table-column label="视频档次" width="90" align="center">
          <template #default="{ row }">
            <span>{{ row.video_profile?.toUpperCase() }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预设" width="90" align="center">
          <template #default="{ row }">
            <span>{{ row.video_preset }}</span>
          </template>
        </el-table-column>
        <el-table-column label="音频编码" width="90" align="center">
          <template #default="{ row }">
            <span>{{ row.audio_codec?.toUpperCase() }}</span>
          </template>
        </el-table-column>
        <el-table-column label="音频码率" width="100" align="center">
          <template #default="{ row }">
            <span>{{ row.audio_bitrate }}kbps</span>
          </template>
        </el-table-column>
        <el-table-column label="水印" width="80" align="center">
          <template #default="{ row }">
            <el-tag v-if="row.image_watermark_enabled || row.text_watermark_enabled" type="warning" size="small">开启</el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="默认" width="70" align="center">
          <template #default="{ row }">
            <el-tag v-if="row.is_default" type="success" size="small">是</el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" width="150" align="center">
          <template #default="{ row }">
            {{ formatDateTime(row.updated_at) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right" align="center">
          <template #default="{ row }">
            <el-button-group>
              <el-tooltip content="编辑" placement="top">
                <el-button 
                  size="small" 
                  type="primary" 
                  :icon="Edit" 
                  circle
                  plain
                  @click="handleEdit(row)"
                />
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button 
                  size="small" 
                  type="danger" 
                  :icon="Delete" 
                  circle
                  plain
                  :disabled="row.is_default"
                  @click="handleDelete(row)"
                />
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 添加/编辑模板对话框 -->
    <el-dialog
      v-model="showAddDialog"
      :title="editingTemplate ? '编辑转码模板' : '新建转码模板'"
      width="800px"
      :close-on-click-modal="false"
      class="template-dialog"
    >
      <el-tabs class="template-tabs">
        <!-- 基础设置标签页 -->
        <el-tab-pane label="基础设置">
          <el-form
            ref="templateFormRef"
            :model="templateForm"
            :rules="templateRules"
            label-width="120px"
            class="template-form"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="模板名称" prop="name">
                  <el-input v-model="templateForm.name" placeholder="请输入模板名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="封装格式" prop="container_format">
                  <el-select v-model="templateForm.container_format" placeholder="请选择封装格式" style="width: 100%">
                    <el-option label="MP4" value="mp4" />
                    <el-option label="FLV" value="flv" />
                    <el-option label="TS" value="ts" />
                    <el-option label="MKV" value="mkv" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-form-item label="描述" prop="description">
              <el-input
                v-model="templateForm.description"
                type="textarea"
                :rows="2"
                placeholder="请输入模板描述"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>

            <el-divider content-position="left">视频参数</el-divider>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="视频编码" prop="video_codec">
                  <el-select v-model="templateForm.video_codec" placeholder="请选择视频编码" style="width: 100%">
                    <el-option label="H.264" value="h264" />
                    <el-option label="H.265" value="h265" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分辨率" prop="video_resolution">
                  <el-select v-model="templateForm.video_resolution" placeholder="请选择分辨率" style="width: 100%">
                    <el-option label="720P" value="1280x720" />
                    <el-option label="1080P" value="1920x1080" />
                    <el-option label="2K" value="2560x1440" />
                    <el-option label="4K" value="3840x2160" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="帧率" prop="video_fps">
                  <el-input-number 
                    v-model="templateForm.video_fps" 
                    :min="15" 
                    :max="60" 
                    :step="1"
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="视频码率" prop="video_bitrate">
                  <el-input-number 
                    v-model="templateForm.video_bitrate" 
                    :min="500" 
                    :max="20000" 
                    :step="100"
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="编码档次" prop="video_profile">
                  <el-select v-model="templateForm.video_profile" placeholder="请选择编码档次" style="width: 100%">
                    <el-option label="Baseline" value="baseline" />
                    <el-option label="Main" value="main" />
                    <el-option label="High" value="high" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="预设" prop="video_preset">
                  <el-select v-model="templateForm.video_preset" placeholder="请选择预设" style="width: 100%">
                    <el-option label="Ultrafast" value="ultrafast" />
                    <el-option label="Superfast" value="superfast" />
                    <el-option label="Veryfast" value="veryfast" />
                    <el-option label="Faster" value="faster" />
                    <el-option label="Fast" value="fast" />
                    <el-option label="Medium" value="medium" />
                    <el-option label="Slow" value="slow" />
                    <el-option label="Slower" value="slower" />
                    <el-option label="Veryslow" value="veryslow" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-divider content-position="left">音频参数</el-divider>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="音频编码" prop="audio_codec">
                  <el-select v-model="templateForm.audio_codec" placeholder="请选择音频编码" style="width: 100%">
                    <el-option label="AAC" value="aac" />
                    <el-option label="MP3" value="mp3" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="音频码率" prop="audio_bitrate">
                  <el-input-number 
                    v-model="templateForm.audio_bitrate" 
                    :min="32" 
                    :max="512" 
                    :step="16"
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="采样率" prop="audio_sample_rate">
                  <el-select v-model="templateForm.audio_sample_rate" placeholder="请选择采样率" style="width: 100%">
                    <el-option label="44.1kHz" :value="44100" />
                    <el-option label="48kHz" :value="48000" />
                    <el-option label="96kHz" :value="96000" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="声道数" prop="audio_channels">
                  <el-select v-model="templateForm.audio_channels" placeholder="请选择声道数" style="width: 100%">
                    <el-option label="单声道" :value="1" />
                    <el-option label="立体声" :value="2" />
                    <el-option label="5.1声道" :value="6" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>

        <!-- 高级设置标签页 -->
        <el-tab-pane label="高级设置">
          <el-form
            :model="templateForm"
            label-width="120px"
            class="template-form"
          >
            <!-- 图片水印设置 -->
            <el-divider content-position="left">图片水印</el-divider>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="启用图片水印">
                  <el-switch v-model="templateForm.image_watermark_enabled" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <template v-if="templateForm.image_watermark_enabled">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="水印图片">
                    <el-input v-model="templateForm.image_watermark_path" placeholder="请输入水印图片路径" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="水印位置">
                    <el-select v-model="templateForm.image_watermark_position" placeholder="请选择位置" style="width: 100%">
                      <el-option label="左上角" value="top-left" />
                      <el-option label="右上角" value="top-right" />
                      <el-option label="左下角" value="bottom-left" />
                      <el-option label="右下角" value="bottom-right" />
                      <el-option label="居中" value="center" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="透明度">
                    <el-slider v-model="templateForm.image_watermark_opacity" :min="0" :max="100" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="缩放比例">
                    <el-input-number 
                      v-model="templateForm.image_watermark_scale" 
                      :min="0.1" 
                      :max="5.0" 
                      :step="0.1"
                      controls-position="right"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </template>

            <!-- 文字水印设置 -->
            <el-divider content-position="left">文字水印</el-divider>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="启用文字水印">
                  <el-switch v-model="templateForm.text_watermark_enabled" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <template v-if="templateForm.text_watermark_enabled">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="文字内容">
                    <el-input v-model="templateForm.text_watermark_content" placeholder="请输入水印文字" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="文字位置">
                    <el-select v-model="templateForm.text_watermark_position" placeholder="请选择位置" style="width: 100%">
                      <el-option label="左上角" value="top-left" />
                      <el-option label="右上角" value="top-right" />
                      <el-option label="左下角" value="bottom-left" />
                      <el-option label="右下角" value="bottom-right" />
                      <el-option label="居中" value="center" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="字体">
                    <el-input v-model="templateForm.text_watermark_font" placeholder="请输入字体名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="字体大小">
                    <el-input-number 
                      v-model="templateForm.text_watermark_size" 
                      :min="8" 
                      :max="100" 
                      :step="1"
                      controls-position="right"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="文字颜色">
                    <el-color-picker v-model="templateForm.text_watermark_color" />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="文字透明度">
                    <el-slider v-model="templateForm.text_watermark_opacity" :min="0" :max="100" />
                  </el-form-item>
                </el-col>
              </el-row>
            </template>

            <!-- 高级选项 -->
            <el-divider content-position="left">高级选项</el-divider>
            <el-form-item label="自定义参数">
              <el-input
                v-model="templateForm.custom_ffmpeg_args"
                type="textarea"
                :rows="3"
                placeholder="请输入自定义FFmpeg参数（可选）"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          {{ editingTemplate ? '更新' : '添加' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Plus, 
  Edit, 
  Delete, 
  Document, 
  Search, 
  Refresh, 
  Check,
  VideoCamera,
  Picture,
  Microphone,
  Setting,
  InfoFilled
} from '@element-plus/icons-vue'
import api from '@/api'

// 响应式数据
const templates = ref([])
const loading = ref(false)
const showAddDialog = ref(false)
const editingTemplate = ref(null)
const templateFormRef = ref()

// 统计数据
const totalTemplates = computed(() => templates.value.length)
const activeTemplates = computed(() => templates.value.filter(t => t.is_active).length)
const defaultTemplates = computed(() => templates.value.filter(t => t.is_default).length)
const videoFormats = computed(() => {
  const formats = new Set(templates.value.map(t => t.container_format))
  return formats.size
})

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

// 搜索表单
const searchForm = reactive({
  search: '',
  format: '',
  codec: ''
})

// 表单数据
const templateForm = reactive({
  name: '',
  description: '',
  container_format: 'mp4',
  video_codec: 'h264',
  video_resolution: '1920x1080',
  video_bitrate: 4000,
  video_fps: 30,
  video_profile: 'high',
  video_preset: 'medium',
  audio_codec: 'aac',
  audio_bitrate: 128,
  audio_sample_rate: 48000,
  audio_channels: 2,
  image_watermark_enabled: false,
  image_watermark_path: '',
  image_watermark_position: 'bottom-right',
  image_watermark_opacity: 50,
  image_watermark_scale: 1.0,
  text_watermark_enabled: false,
  text_watermark_content: '',
  text_watermark_position: 'bottom-right',
  text_watermark_font: 'Arial',
  text_watermark_size: 24,
  text_watermark_color: '#FFFFFF',
  text_watermark_opacity: 50,
  custom_ffmpeg_args: '',
  is_active: true,
  is_default: false
})

// 表单验证规则
const templateRules = {
  name: [
    { required: true, message: '请输入模板名称', trigger: 'blur' },
    { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  container_format: [
    { required: true, message: '请选择封装格式', trigger: 'change' }
  ],
  video_codec: [
    { required: true, message: '请选择视频编码', trigger: 'change' }
  ],
  video_resolution: [
    { required: true, message: '请选择分辨率', trigger: 'change' }
  ],
  video_bitrate: [
    { required: true, message: '请输入视频码率', trigger: 'blur' },
    { type: 'number', min: 100, max: 50000, message: '码率应在 100-50000 kbps 之间', trigger: 'blur' }
  ],
  video_fps: [
    { required: true, message: '请输入帧率', trigger: 'blur' },
    { type: 'number', min: 1, max: 120, message: '帧率应在 1-120 fps 之间', trigger: 'blur' }
  ],
  audio_codec: [
    { required: true, message: '请选择音频编码', trigger: 'change' }
  ],
  audio_bitrate: [
    { required: true, message: '请输入音频码率', trigger: 'blur' },
    { type: 'number', min: 32, max: 1000, message: '码率应在 32-1000 kbps 之间', trigger: 'blur' }
  ],
  audio_sample_rate: [
    { required: true, message: '请选择音频采样率', trigger: 'change' }
  ],
  audio_channels: [
    { required: true, message: '请选择声道数', trigger: 'change' }
  ]
}

// 获取模板列表
const fetchTemplates = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      limit: pagination.size,
      search: searchForm.search || undefined,
      container_format: searchForm.format || undefined,
      video_codec: searchForm.codec || undefined
    }
    // 移除空值参数
    Object.keys(params).forEach(key => {
      if (params[key] === null || params[key] === undefined || params[key] === '') {
        delete params[key]
      }
    })
    const response = await api.get('/transcode-templates/list', { params })
    
    // 响应数据已经是处理后的data字段
    if (response && response.items) {
      templates.value = Array.isArray(response.items) ? response.items : []
      pagination.total = response.total || 0
    } else {
      console.error('API返回格式错误:', response)
      templates.value = []
      pagination.total = 0
    }
  } catch (error) {
    console.error('获取模板列表失败:', error)
    ElMessage.error('获取模板列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.page = 1
  fetchTemplates()
}

// 重置搜索
const resetSearch = () => {
  searchForm.search = ''
  searchForm.format = ''
  searchForm.codec = ''
  handleSearch()
}

// 分页处理
const handleSizeChange = (size) => {
  pagination.size = size
  fetchTemplates()
}

const handleCurrentChange = (page) => {
  pagination.page = page
  fetchTemplates()
}

// 打开添加模板对话框
const openAddTemplateDialog = () => {
  editingTemplate.value = null
  Object.assign(templateForm, {
    name: '',
    description: '',
    container_format: 'mp4',
    video_codec: 'h264',
    video_resolution: '1920x1080',
    video_bitrate: 4000,
    video_fps: 30,
    video_profile: 'high',
    video_preset: 'medium',
    audio_codec: 'aac',
    audio_bitrate: 128,
    audio_sample_rate: 48000,
    audio_channels: 2,
    image_watermark_enabled: false,
    image_watermark_path: '',
    image_watermark_position: 'bottom-right',
    image_watermark_opacity: 50,
    image_watermark_scale: 1.0,
    text_watermark_enabled: false,
    text_watermark_content: '',
    text_watermark_position: 'bottom-right',
    text_watermark_font: 'Arial',
    text_watermark_size: 24,
    text_watermark_color: '#FFFFFF',
    text_watermark_opacity: 50,
    custom_ffmpeg_args: '',
    is_active: true,
    is_default: false
  })
  showAddDialog.value = true
}

// 编辑模板
const editTemplate = (row) => {
  editingTemplate.value = row
  Object.assign(templateForm, {
    ...row,
    image_watermark_enabled: row.image_watermark_enabled || false,
    text_watermark_enabled: row.text_watermark_enabled || false
  })
  showAddDialog.value = true
}



// 删除模板
const deleteTemplate = async (row) => {
  if (row.is_default) {
    ElMessage.warning('默认模板不能删除')
    return
  }
  try {
    await ElMessageBox.confirm(
      `确定要删除转码模板 "${row.name}" 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    await api.delete(`/transcode-templates/${row.id}`)
    ElMessage.success('删除成功')
    fetchTemplates()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 切换状态
const toggleStatus = async (row) => {
  try {
    await api.patch(`/transcode-templates/${row.id}`, {
      is_active: row.is_active
    })
    ElMessage.success('状态更新成功')
  } catch (error) {
    row.is_active = !row.is_active
    ElMessage.error('状态更新失败')
    console.error('状态更新失败:', error)
  }
}

// 设为默认
const setAsDefault = async (row) => {
  try {
    await api.post(`/transcode-templates/${row.id}/set-default`)
    ElMessage.success('设为默认模板成功')
    fetchTemplates()
  } catch (error) {
    ElMessage.error('设为默认模板失败')
    console.error('设为默认模板失败:', error)
  }
}

// 提交表单
const handleSubmit = async () => {
  try {
    await templateFormRef.value.validate()
    const submitData = { ...templateForm }
    if (editingTemplate.value) {
      await api.put(`/transcode-templates/${editingTemplate.value.id}`, submitData)
      ElMessage.success('更新成功')
    } else {
      await api.post('/transcode-templates/', submitData)
      ElMessage.success('添加成功')
    }
    showAddDialog.value = false
    fetchTemplates()
  } catch (error) {
    if (error !== false) {
      console.error('提交失败:', error)
      ElMessage.error('提交失败')
    }
  }
}

// 格式化日期时间
const formatDateTime = (dateString) => {
  if (!dateString) return '-'
  return new Date(dateString).toLocaleString('zh-CN')
}

// 生命周期钩子
onMounted(() => {
  fetchTemplates()
})
</script>

<style scoped>
.template-management {
  padding: 24px;
  background: #f8f9fa;
  min-height: 85vh;
}

.header {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.header-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.header-subtitle {
  font-size: 14px;
  color: #909399;
  margin: 8px 0 0 0;
}

.search-section {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  margin-top: 24px;
}

.search-form {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.template-table {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #e8e8e8;
    margin-top: 24px;
  }

  .template-table :deep(.el-table__header-wrapper) {
    background: #f5f7fa;
    border-radius: 12px 12px 0 0;
  }

  .template-table :deep(.el-table__header) {
    font-weight: 600;
    color: #303133;
  }

  .template-table :deep(.el-table__row:hover) {
    background: #f5f7fa;
  }

  .template-table :deep(.el-table) {
    border: none;
  }

  .template-table :deep(.el-table--border) {
    border: none;
  }

  .template-table :deep(.el-table--border::after) {
    display: none;
  }

.status-tag {
  font-weight: 500;
}

.default-badge {
  margin-left: 8px;
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.dialog-header-icon {
  font-size: 24px;
  color: #409eff;
}

.dialog-header-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.param-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
}

.param-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.param-section-icon {
  font-size: 18px;
  color: #409eff;
}

.param-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.param-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.param-row .el-form-item {
  margin-bottom: 0;
  flex: 1;
  min-width: 200px;
}

.watermark-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.watermark-config {
  background: white;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.watermark-preview {
  width: 100%;
  height: 200px;
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
  transition: all 0.3s ease;
}

.watermark-preview:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.watermark-preview.has-image {
  border-style: solid;
  border-color: #67c23a;
  background: #f0f9ff;
}

.custom-args-section {
  background: #f5f7fa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

.pagination-container {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
}

.empty-state-icon {
  font-size: 48px;
  color: #dcdfe6;
  margin-bottom: 16px;
}

.empty-state-title {
  font-size: 18px;
  margin-bottom: 8px;
  color: #606266;
}

.empty-state-description {
  font-size: 14px;
  color: #909399;
}

@media (max-width: 768px) {
  .template-management {
    padding: 16px;
  }
  
  .header {
    padding: 20px;
  }
  
  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .watermark-section {
    grid-template-columns: 1fr;
  }
  
  .param-grid {
    grid-template-columns: 1fr;
  }
}

/* 统计卡片样式 */
.stats-section {
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.blue {
  background: linear-gradient(135deg, #409eff, #66b1ff);
}

.stat-icon.green {
  background: linear-gradient(135deg, #67c23a, #85ce61);
}

.stat-icon.purple {
  background: linear-gradient(135deg, #9c27b0, #ba68c8);
}

.stat-icon.orange {
  background: linear-gradient(135deg, #ff9800, #ffb74d);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  font-weight: 500;
}

/* 搜索区域样式 */
.search-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.search-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.form-item-large {
  min-width: 200px;
}

.form-item-large .el-input,
.form-item-large .el-select {
  width: 100%;
}

/* 表格样式增强 */
.template-table {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.template-table :deep(.el-table__header-wrapper) {
  background: linear-gradient(135deg, #f5f7fa, #ebeef5);
}

.template-table :deep(.el-table__header th) {
  font-weight: 600;
  color: #303133;
  background: transparent;
  border-bottom: 1px solid #ebeef5;
}

.template-table :deep(.el-table__row) {
  transition: all 0.3s ease;
}

.template-table :deep(.el-table__row:hover) {
  background: #f5f7fa;
  transform: scale(1.01);
}

.template-table :deep(.el-table__row.expanded-row) {
  background: #f0f9ff;
}

/* 标签样式 */
.status-tag {
  font-weight: 500;
  border-radius: 12px;
  padding: 4px 12px;
}

.default-badge {
  margin-left: 8px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

.template-tabs .el-tabs__content {
  padding: 16px 0;
}

/* 参数区域样式 */
.param-section {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

.param-section:hover {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
}

.param-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.param-section-icon {
  font-size: 18px;
  color: #409eff;
  background: linear-gradient(135deg, #409eff, #66b1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.param-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.param-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.param-row .el-form-item {
  margin-bottom: 0;
  flex: 1;
  min-width: 200px;
}

/* 水印预览样式 */
.watermark-preview {
  width: 100%;
  height: 200px;
  border: 2px dashed #dcdfe6;
  border-radius: 12px;
  background: linear-gradient(135deg, #fafafa, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.watermark-preview::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(64, 158, 255, 0.1), transparent);
  transform: rotate(45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.watermark-preview:hover::before {
  opacity: 1;
  animation: shimmer 1.5s ease-in-out;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.watermark-preview:hover {
  border-color: #409eff;
  background: linear-gradient(135deg, #f0f9ff, #e6f4ff);
  transform: scale(1.02);
}

.watermark-preview.has-image {
  border-style: solid;
  border-color: #67c23a;
  background: linear-gradient(135deg, #f0f9ff, #e8f5e8);
}

/* 自定义参数区域 */
.custom-args-section {
  background: linear-gradient(135deg, #f5f7fa, #e9ecef);
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #409eff;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
}

/* 对话框底部样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
  background: linear-gradient(135deg, #f5f7fa, #ffffff);
  margin: 20px -20px -20px -20px;
  padding: 20px 20px 20px 20px;
  border-radius: 0 0 8px 8px;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  background: transparent;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
}

.empty-state-icon {
  font-size: 64px;
  color: #dcdfe6;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 20px;
  margin-bottom: 8px;
  color: #606266;
  font-weight: 500;
}

.empty-state-description {
  font-size: 14px;
  color: #909399;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .param-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .template-management {
    padding: 12px;
  }
  
  .header {
    padding: 20px;
  }
  
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .header-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-item-large {
    min-width: 100%;
  }
  
  .watermark-section {
    grid-template-columns: 1fr;
  }
  
  .param-grid {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    padding: 16px;
  }
  
  .stat-number {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .template-management {
    padding: 8px;
  }
  
  .header {
    padding: 16px;
  }
  
  .header-title {
    font-size: 20px;
  }
  
  .search-section {
    padding: 16px;
  }
  
  .stat-card {
    flex-direction: column;
    text-align: center;
  }
  
  .stat-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  
  .stat-number {
    font-size: 20px;
  }
}

/* 移除深色模式支持，保持白底简约风格 */

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style>